<style>
    #calculate {
        line-height: 60px;
        text-align: center;
        background: #ccc;
        font-size: 16px;
        font-weight: bold;
    }
    #calculate tbody input{
        width: 100%;
        height: 60px;
        background:#033;
        color: #fff;
        font: bold 16px/1em 'Microsoft yahei';
    }
    #calculate tbody td{
        width: 25%;
        background: #fff;
    }
    #calculate_outPut{
        font-size: 20px;
        letter-spacing:2px;
        background:#fff;
        height: 40px;
        border: none;
        text-align: right;
        width: 100%;
    }
</style>
<table width="300" border="0" cellspacing="1" cellpadding="0" id="calculate">
    <thead >
    <tr>
        <td colspan="4" align="right"><input id="calculate_outPut" value="0" disabled="disabled"></td>
    </tr>
    </thead>
    <tbody id="calculate_num">
    <tr>
        <td><label>
            <input type="button" name="button" id="button" value="7" _type='num' />
        </label></td>
        <td><input type="button" value="8" _type='num' /></td>
        <td><input type="button" value="9" _type='num' /></td>
        <td><input type="button" value="/" _type='op' /></td>
    </tr>
    <tr>
        <td><input type="button" value="4" _type='num' /></td>
        <td><input type="button" value="5" _type='num' /></td>
        <td><input type="button" value="6" _type='num' /></td>
        <td><input type="button" value="*" _type='op' /></td>
    </tr>
    <tr>
        <td><input type="button" value="1" _type='num' /></td>
        <td><input type="button" value="2" _type='num' /></td>
        <td><input type="button" value="3" _type='num' /></td>
        <td><input type="button" value="-" _type='op' /></td>
    </tr>
    <tr>
        <td><input type="button" value="0" _type='num' /></td>
        <td><input type="button" value="+/-" _type='+/-' /></td>
        <td><input type="button" value="." _type='.' /></td>
        <td><input type="button" value="+" _type='op' /></td>
    </tr>
    <tr>
        <td colspan="2" id="debug"><input type="button" value="backspace" _type='bs' /></td>
        <td><input type="button" value="C" _type='cls' /></td>
        <td><input type="button" value="=" _type='eval' /></td>
    </tr>
    </tbody>
</table>
<script>
    //计算对象
    var operateExp={
        '+':function(num1,num2){return num1+num2;},
        '-':function(num1,num2){return num1-num2;},
        '*':function(num1,num2){return num1*num2;},
        '/':function(num1,num2){return num2===0?0:num1/num2;}
    }
    //计算函数
    var operateNum=function(num1,num2,op){
        if(!(num1&&num2))return;
//保证num1,num2都为数字
        num1=Number(num1);
        num2=Number(num2);
//不存在操作符,返回num1;
        if(!op)return num1;
//匹配运算公式
        if(!operateExp[op])return 0;
        return operateExp[op](num1,num2);
    }
    //显示面板
    var calculate_outPut=document.getElementById("calculate_outPut");
    //操作面板
    var calculate_num=document.getElementById("calculate_num");
    var result=0;//计算结果
    var isReset=false;//是否重新设置
    var operation;//操作符
    //设置显示屏的值
    function setScreen(num){
        calculate_outPut.value=num;
    }
    //获取显示屏的值
    function getScreen(){
        return calculate_outPut.value;
    }
    //添加点击事件
    calculate_num.onclick=function(e){
        var ev = e || window.event;
        var target = ev.target || ev.srcElement;
        if(target.type=="button"){
            var mark=target.getAttribute("_type");//获取当前点击button的自定义的属性。
            var value=target.value;//获取当前的值
            var num=getScreen();//获取当前框的值
            if(mark==='bs'){//退格键
                if(num==0)return;
                var snum=Math.abs(num).toString();
                if(snum.length<2)
                    setScreen(0);
                else
                    setScreen(num.toString().slice(0,-1));
            }
            if(mark==='num'){//数字键
                if(num==='0'||isReset){//有操作符或显示屏为0
                    setScreen(value);
                    isReset=false;
                    return;
                }
                setScreen(num.toString().concat(value));
            }
            if(mark==="."){//小数点
                var hasPoint=num.toString().indexOf(".")>-1;
                if(hasPoint){
                    if(isReset){
                        setScreen("0"+value);
                        isReset=false;
                        return;
                    }
                    return;
                }
                setScreen(num.toString().concat(value));
            }
            if(mark==="+/-"){//正负号
                setScreen(-num);
            }
            if(mark==="op"){//如果点击的是操作符则设计第一个操作数
                if(isReset)return;
                isReset=true;
                if(!operation){
                    result=+num;
                    operation=value;
                    return;
                }
                result=operateNum(result,num,operation);
                setScreen(result);
                operation=value;
            }
            if(mark==="cls"){//清零
                result=0;
                setScreen(result);
                isReset=false;
            }
            if(mark==="eval"){//计算
                if(!operation)return;
                result=operateNum(result,num,operation);
                setScreen(result);
                operation=null;
                isReset=false;
            }
        }
    }
</script>